<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>小工具</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
            <style>
                  .border,span {
                        display: inline-block;
                        width: 80px;
                        height: 80px;
                        margin: 6px;
                        background-color: #555;
                  }
            </style>
      </head>
      <body>
            <div class="container">
                  <!-- 边框 -->
                  <span class="border border-primary"></span>
                  <span class="border border-0"></span>
                  <span class="border border-top-0 border-secondary"></span>
                  <span class="border border-right-0 border-success"></span>
                  <span class="border border-bottom-0 border-danger"></span>
                  <!-- border-info,border-light,border-dark,border-white -->
                  <span class="border border-left-0 border-warning"></span>

                  <br/>
                  <!-- 倒圆角 -->
                  <span class="rounded"></span>
                  <span class="rounded-top"></span>
                  <span class="rounded-right"></span>
                  <span class="rounded-bottom"></span>
                  <span class="rounded-left"></span>
                  <span class="rounded-circle"></span>
                  <span class="rounded-0"></span>
                  <br/>
                  <!-- 浮动 -->
                  <div class="clearfix">
                        <div class="float-left">左浮动</div>
                        <div class="float-right">左浮动</div>
                  </div>

                  <!-- 根据屏幕大小浮动 -->
                  <div class="float-sm-right">在大于小屏幕尺寸上右浮动</div>
                  <div class="float-md-right">在大于中屏幕尺寸上右浮动</div>
                  <div class="float-lg-right">在大于大屏幕尺寸上右浮动</div>
                  <div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div>
                  <div class="float-none">在大于小屏幕尺寸上右浮动</div>

                  <!-- 居中对齐 -->
                  <div class="mx-auto bg-warning" style="width: 150px;">居中显示</div>

                  <!-- 宽度 -->
                  <div class="w-25 bg-warning">宽度25%</div>
                  <div class="w-50 bg-warning">宽度50%</div>
                  <div class="w-75 bg-warning">宽度75%</div>
                  <div class="w-100 bg-warning">宽度100%</div>
                  <div class="mw-25 bg-warning">最大宽度25%</div>

                  <br/>
                  <!-- 高度 -->
                  <div style="height: 200px;background-color: #ddd;">
                        <div class="h-25 d-inline-block p-2 bg-warning">高度25%</div>
                        <div class="h-50 d-inline-block p-2 bg-warning">高度50%</div>
                        <div class="h-75 d-inline-block p-2 bg-warning">高度75%</div>
                        <div class="h-100 d-inline-block p-2 bg-warning">高度100%</div>
                        <div class="mh-100 d-inline-block p-2 bg-warning" style="height: 500px;">最大高度100%</div>
                  </div>

                  <form>
                        <div class="form-row">
                              <div class="form-group">
                                    <label for="text" class="mt-2">设置margin-top</label>
                                    <input type="text" class="form-control" id="text" placeholder="请输入">

                                    <label for="color" class="mt-2">颜色：</label>
                                    <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off">
                              </div> 
                        </div>
                  </form>
            </div>
      </body>
</html>